<template>
  <div class="blog-admin-container">
    <el-card>
      <div class="blog-admin-container-title">标签管理</div>
      <div class="operation-container">
        <div>
          <el-button type="primary" size="small" icon="el-icon-plus" @click="createOpenTagDialog">新增</el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            :disabled=" selectedData.length === 0"
            @click="batchDeletionVisible = true"
          >批量删除
          </el-button>
        </div>
        <div class="search-container">
          <el-input
            v-model="search"
            prefix-icon="el-icon-search"
            size="small"
            placeholder="搜索标签名称"
            clearable
            @clear="clearSearch"
          />
          <el-button type="primary" :disabled=" search.length === 0" size="small" icon="el-icon-search" @click="getSearchCurrentData">搜索</el-button>
        </div>
      </div>
      <div class="table-container">
        <el-table
          ref="multipleTable"
          :data="tagData"
          border
          style="width: 100%"
          @select="handleSelection"
          @select-all="handleAllSelection"
        >
          <el-table-column
            type="selection"
            width="55"
          />

          <el-table-column
            align="center"
            prop="tag_name"
            label="标签名称"
            width="280"
          >
            <template slot-scope="scope">
              <el-tag>{{ scope.row.tag_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="articles_count"
            label="文章数量"
            width="280"
          />
          <el-table-column
            align="center"
            prop="create_time"
            label="创建时间"
          />
          <el-table-column
            label="操作"
            align="center"
            width="280"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini" style="margin-right: 10px" @click="updateOpenTagDialog(scope.row)">
                修改
              </el-button>
              <el-popconfirm
                title="你确定删除这个分类?"
                icon="el-icon-info"
                icon-color="red"
                @onConfirm="delTag(scope.row.id)"
              >
                <el-button slot="reference" type="danger" size="mini">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging-container">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageData.pageSize"
          :page-sizes="[5,10,20]"
          :total="pageData.total"
          background
          @size-change="handleCurrentSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-dialog
      :visible.sync="TagDialog.dialogVisible"
      width="30%"
      @close="reductionDialog"
    >
      <div slot="title"><h3>{{ TagDialog.dialogName }}</h3></div>
      <div class="add-category-input">
        <el-form ref="form" :model="TagDialog" label-width="80px">
          <el-form-item label="标签名">
            <el-input v-model="TagDialog.dialogInput" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reductionDialog">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="batchDeletionVisible"
      width="20%"
      center
      @close="batchDeletionVisible = false"
    >
      <h2 style="text-align: center">确定要删除这些标签吗?</h2>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="batchDeletionVisible = false">取 消</el-button>
        <el-button type="danger" @click="batchDelete">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import PagerMixin from '@/components/mixins/PagerMixin'

import { getTags, updateTag, createTag, deleteTag, batchDeleteTag } from '@/api/tags'
import { Message } from 'element-ui'

export default {
  name: 'Tags',
  mixins: [PagerMixin],
  data() {
    return {
      batchDeletionVisible: false,
      TagDialog: {
        dialogName: '',
        dialogInput: '',
        dialogType: '', // create or update
        dialogVisible: false,
        updateTagId: '' // 修改特有字段
      },
      tagData: [],
      selectedData: [] // 被选中的数据
    }
  },
  created() {
    this.getCurrentData()
  },
  methods: {
    getCurrentData() {
      const params = { pageNum: this.pageData.pageNum, pageSize: this.pageData.pageSize }
      if (this.pageData.search.length !== 0) {
        params.search = this.pageData.search
      }
      getTags(params).then(res => {
        this.getPageConfig(res)
        this.tagData = res.data.result
      })
    },
    batchDelete() {
      const this_ = this
      const ids = []
      for (let i = 0; i < this.selectedData.length; i++) {
        ids.push(this.selectedData[i].id)
      }
      batchDeleteTag({ ids: ids }).then(res => {
        Message({
          message: '批量删除成功',
          type: 'success',
          duration: 5 * 1000
        })
        this_.getCurrentData()
        this_.selectedData = []
        this_.batchDeletionVisible = false
      }).catch(res => {
        this_.batchDeletionVisible = false
      })
    },
    handleSelection(selection, row) { // 表格数据被选中触发
      this.selectedData = selection
    },
    handleAllSelection(selection) { // 表格数据全选触发
      this.selectedData = selection
    },
    createOpenTagDialog() {
      this.TagDialog.dialogName = '新增标签'
      this.TagDialog.dialogType = 'create'
      this.TagDialog.dialogVisible = true
    },
    updateOpenTagDialog(row) {
      this.TagDialog.dialogName = '修改标签'
      this.TagDialog.dialogType = 'update'
      this.TagDialog.dialogVisible = true
      this.TagDialog.dialogInput = row.tag_name
      this.TagDialog.updateTagId = row.id
    },
    dialogConfirm() {
      const this_ = this
      if (this.TagDialog.dialogType === 'create') {
        createTag({ tag_name: this.TagDialog.dialogInput }).then(resp => {
          Message({
            message: '创建成功',
            type: 'success',
            duration: 5 * 1000
          })
          this_.getCurrentData()
        })
      } else {
        updateTag({ tag_name: this.TagDialog.dialogInput, id: this.TagDialog.updateTagId }).then(resp => {
          Message({
            message: '更新成功',
            type: 'success',
            duration: 5 * 1000
          })
          this_.getCurrentData()
        })
      }
      this.reductionDialog()
    },
    reductionDialog() {
      this.TagDialog.dialogName = ''
      this.TagDialog.dialogType = ''
      this.TagDialog.dialogInput = ''
      this.TagDialog.updateTagId = ''
      this.TagDialog.dialogVisible = false
    },
    delTag(tag_id) {
      const this_ = this
      deleteTag({ id: tag_id }).then(res => {
        Message({
          message: '删除成功',
          type: 'success',
          duration: 5 * 1000
        })
        this_.getCurrentData()
      })
    }
  }
}
</script>

<style lang="less">

  .operation-container {
    display: flex;
    justify-content: space-between;

    .search-container {
      display: flex;

      & div:first-child {
        margin-right: 20px;
      }

    }
  }

  .table-container {
    margin: 20px 0;
  }

  .paging-container {

    padding-bottom: 30px;

    & > div:first-child {
      float: right;
    }
  }

  .add-category-input {
    display: flex;
  }

</style>
